<!DOCTYPE html>
<html>

<head>
    <title>小郑同学</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="./css/zhuce.css">


    <!-- <link rel="stylesheet" href="./css/denglu/iconfont.css"> -->
</head>

<body>
    <header></header>


    <aside>
        <div id="container" style="margin-left:543px;">

            <form id="form" class="form">
                <div class="form-control">


                    <label for="username">用户名</label>
                    <input type="text" placeholder="用户名数字，母下划线,不能以数字开头2-10位" id="username"
                        style="font-size: 12px;" /><br>

                    <span id="showUser" style="font-size: 12px;z-index: 999;"></span>

                    <small>Error message</small>
                    <span class="ming" style="background-color: red;color: wheat;font-size: 12px;"></span>
                </div>

                <div class="form-control">
                    <label for="username">密码</label>
                    <input type="password" placeholder="密码必须是数字，6-16" id="password"><br>
                    <span id="showPass" style="font-size: 12px;z-index: 999;"></span>

                    <small>Error message</small>
                </div>
                <div class="form-control" style="padding-bottom: 20px; border-bottom: 1px solid #e5e5e5;">
                    <label for="username">确认密码</label>
                    <input type="password" placeholder="确认密码" id="password2">

                    <small>Error message</small>
                </div>
                <p style="font-size: 13px; color:#888;padding-bottom: 10px;border-bottom: 1px solid #e5e5e5;">
                    <input type="checkbox" name="" id="">我同意《用户手册》和《保密条款》
                </p>
                <div style="position: relative;">
                    <button class="zhuce" style="width: 60px;
                    height: 28px;
                    padding: 0 10px;
                    margin-right: 15px!important;
                    vertical-align: baseline!important;
                    display: inline-block!important;
                    background: #000 !important;
                    border: 1px solid #000 !important;
                    color: #fff !important;
                    box-shadow: inset 0 1px #000 !important;
                    border-radius: 3px!important;
                    margin-top: 20px;">提交</button>
                    <button class="denglu" style=" width: 63px;
                    height: 28px;
                    padding: 0 10px;
                    margin-right: 15px!important;
                    display: inline-block!important;
                    background: #fff !important;
                    border: 1px solid #ddd !important;
                    color: #666 !important;
                    box-shadow: inset 0 1px #fff !important;
                    border-radius: 3px!important;
                    position: absolute;
                    top: 20px!important;
                    left: 325px!important;">登录</button></div>
                <p class="san" style="font-size: 13px;color:#888;">
                    第三方账号登录：<a href="https://graph.qq.com/oauth2.0/show">
                    </a>
                </p>
                <div id="messageBox">

                </div>
            </form>
        </div>
        <ol>
            <p>说明：</p>
            <li>1.实际使用之前，需配置用户管理组件中的相关邮件。详情请参考教程：<a
                    href="https://www.qifeiye.com/%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86%E4%B8%AD%E7%9B%B8%E5%85%B3%E9%82%AE%E4%BB%B6%E7%9A%84%E9%85%8D%E7%BD%AE/">《用户管理中相关邮件的配置》</a>
            </li>
            <li>2.新用户注册后的审核方式有三种：自动核准、邮件激活、需要管理员批准（即人工审核），详情可参考教程<a
                    href="https://www.qifeiye.com/%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%E5%90%8E%E7%9A%84%E5%AE%A1%E6%A0%B8%E6%96%B9%E5%BC%8F%EF%BC%88%E8%87%AA%E5%8A%A8%E5%AE%A1%E6%A0%B8%E3%80%81%E9%82%AE%E4%BB%B6/">《如何设置用户注册后的审核方式》
                </a></li>
        </ol>

    </aside>
    <footer></footer>
</body>

</html>
<script src="./js/jQuery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("foot.html");
    const form = document.getElementById('form');
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const password2 = document.getElementById('password2');

    form.addEventListener('submit', e => {
        e.preventDefault();
        checkInputs();
    });

    function checkInputs() {
        // trim to remove the whitespaces
        const usernameValue = username.value.trim();
        const passwordValue = password.value.trim();
        const password2Value = password2.value.trim();

        if (usernameValue === '') {
            setErrorFor(username, '用户名不能为空');
        } else {
            setSuccessFor(username);
        }

        if (passwordValue === '') {
            setErrorFor(password, '密码不能为空');
        } else {
            setSuccessFor(password);
        }

        if (password2Value === '') {
            setErrorFor(password2, '密码不能为空');
        } else if (passwordValue !== password2Value) {
            setErrorFor(password2, '两次密码不正确');
        } else {
            setSuccessFor(password2);
            document.cookie = "name=" + document.getElementById("username").value;
    document.cookie = "age = " + document.getElementById("password").value;
    console.log(document.cookie)

        }
    }

    function setErrorFor(input, message) {
        const formControl = input.parentElement;
        const small = formControl.querySelector('small');
        formControl.className = 'form-control error';
        small.innerText = message;
    }

    function setSuccessFor(input) {
        const formControl = input.parentElement;
        formControl.className = 'form-control success';
        $(".zhuce").click(function () {
            $.ajax({
                type: "POST",
                url: "./goodsAndShoppingCart/addUser.php",
                data: {
                    username: $("#username").val(),
                    userpass: $("#password").val()
                },
                success: function (msg) {
                    console.log(msg);
                    show(msg);
                }
            });

            function show(msg) {
                if (msg = "success") {
                    location.href = "./denglu.html";
                } else {

                }
            }
        });
    }

    function isTest() {
        return isUserName() && isPass();
    }
    //链接用户是否存在
    console.log($("#password"));
    $("#username").blur(function () {
        $.ajax({
            type: "GET",
            url: "./goodsAndShoppingCart/checkUser.php",
            data: {
                username: $("#username").val()

            },
            success: function (msg) {
                console.log(msg)
                show1(msg);
            }
        });

        function show1(msg) {
            $(".ming").eq(0).html("");
            if (msg == 0) {
                console.log("jjjj")
                $(".ming").eq(0).html("用户名存在");
            } else if (msg == 1) {
                
                console.log("llll")
                // $(".ming").eq(0).html("");
            }
        }
    });


    function isTest() {
        return isUserName() && isPass();
    }

    //1、用户名的前端验证
    function isUserName() {
        //1)、非空判断
        if ($("#username").val() == "") {
            return false;
        }
        //2)、格式判断
        // 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
        let reg = /^[a-zA-Z_]\w{1,9}$/;
        if (!reg.test($("#username").val())) {
            return false;
        }
        return true;
    }


    //2、密码的前端验证
    function isPass() {
        //1)、非空判断
        if ($("#password").val() == "") {
            return false;
        }
        //2)、格式判断
        // 数字，6-16位
        let reg = /^\d{6,16}$/;
        if (!reg.test($("#password").val())) {
            return false;
        }
        return true;
    }

    //二、后端验证
    let hasUser = false; //该用户名不存在
    function hasUserBack() {
        //后端验证用户名是否存在
        $.get("./goodsAndShoppingCart/checkUser.php", {
            "username": $("#username").val()
        }, function (data) {
            if (data == "0") {
                $("#showUser").html("亲，该用户名已经存在，请重新思考！");
                $("#showUser").css({
                    "color": "red"
                });
                hasUser = true;
            } else {
                $("#showUser").html("亲，该用户名符合！");
                $("#showUser").css({
                    "color": "green"
                });
                hasUser = false;
            }
        })
    }

    $(function () {
        $("#username").blur(function () {
            //1、前端验证
            if (isUserName() == false) {
                $("#showUser").html("亲，用户名的格式不正确！");
                return;
            }
            //2、后端的验证
            hasUserBack();
        });

        $("#password").blur(function () {
            //1、前端验证
            if (isPass() == false) {
                $("#showPass").html("亲，密码格式不正确	！");
                return;
            } else {
                $("#showPass").html("√");
            }
        });

        $("#btnReg").click(function () {
            //1、前端验证
            if (isTest() == false) {
                $("#messageBox").html("亲，您的信息输入不全");
                return;
            }
            //2、用户名是否存在(后端验证)
            if (hasUser) {
                return;
            }

        });
    });
   
</script>